<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.top {
				width: 100%;
				height: 3.58rem;
				/*background: red;*/
				display: flex;
				border-bottom: 1px solid gainsboro;
			}
			
			.top p {
				flex: 1;
				line-height: 3.58rem;
			}
			
			.top p:nth-child(1) {
				text-align: left;
				padding-left: 1.2rem;
				font-size: 1.3rem;
			}
			
			.top p:nth-child(2) {
				text-align: center;
				font-size: 1.3rem;
			}
			
			.top p:nth-child(3) {
				text-align: right;
				padding-right: 1.2rem;
				font-size: 2.33rem;
			}
			/*content*/
			
			.binding {
				width: 100%;
				height: 3.58rem;
				/*background: red;*/
				display: flex;
				border-bottom: 1px solid gainsboro;
			}
			
			.binding p {
				flex: 1;
				line-height: 3.58rem;
			}
			
			.binding p:nth-child(1) {
				text-align: left;
				padding-left: 1.2rem;
				font-size: 1.5rem;
			}
			
			.binding p:nth-child(2) {
				text-align: center;
				font-size: 1.2rem;
			}
			
			.binding p:nth-child(3) {
				text-align: right;
				padding-right: 1.2rem;
				font-size: 2.33rem;
			}
			
			.con-bon {
				width: 100%;
				height: 30.8rem;
				background: white;
				padding-top: 2rem;
			}
			
			
			.con-shang {
				width: 90%;
				height: 2.66rem;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 1rem;
				background: white;
				border: 1px solid darkgray;
				overflow: hidden;
			}
			
			.con-shang input {
				width: 75%;
				height: 2.66rem;
				border: 0;
				/*border-right: 1px solid darkgray;*/
				padding-left: 0.5rem;
				font-size: 1rem;
				float: left;
			}
			
			.shang-one{
				width: 15%;
				height: 1.5rem;
				/*text-align: center;*/
				float: left;
				/*background: red;*/
				/*margin-left: 1rem;*/
				margin-top: 0.3rem;
				
			}
			
			
			
			
			.con-top {
				width: 90%;
				height: 2.66rem;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 1rem;
				border: 1px solid darkgray;
				overflow: hidden;
			}
			
			.con-top input {
				width: 99%;
				height: 2.66rem;
				border: 0;
				border-radius: 10px;
				padding-left: 0.5rem;
				font-size: 1rem;
			}
			
			.con-xia {
				width: 90%;
				height: 2.66rem;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 1rem;
				background: white;
				border: 1px solid darkgray;
				overflow: hidden;
			}
			
			.con-xia input {
				width: 75%;
				height: 2.66rem;
				border: 0;
				/*border-right: 1px solid darkgray;*/
				padding-left: 0.5rem;
				font-size: 1rem;
				float: left;
			}
			
			.div{
				width: 15%;
				height: 1.5rem;
				/*text-align: center;*/
				float: right;
				/*background: red;*/
				/*margin-left: 1rem;*/
				margin-top: 0.7rem;
			}
			
			.anniu {
				width: 90%;
				height: 2.66rem;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 1rem;
				background: #e42321;
				border: 1px solid darkgray;
				overflow: hidden;
			}
			
			.anniu p {
				text-align: center;
				line-height: 2.26rem;
				color: white;
				font-size: 1.2rem;
			}
			
			/*开关按钮*/
			   #toggle-button{ display: none; }
        .button-label{
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
            
            background-color: #ccc;
            box-shadow: #ccc 0px 0px 0px 2px;
            border-radius: 30px;
            overflow: hidden;
        }
        .circle{
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
        }
        .button-label .text {
            line-height: 20px;
            font-size: 12px;
            text-shadow: 0 0 2px #ddd;
        }

        .on { color: #fff; display: none; text-indent: 10px;}
        .off { color: #fff; display: inline-block; text-indent: 34px;}
        .button-label .circle{
            left: 0;
            transition: all 0.3s;
        }
        #toggle-button:checked + label.button-label .circle{
            left: 20px;
        }
        #toggle-button:checked + label.button-label .on{ display: inline-block; }
        #toggle-button:checked + label.button-label .off{ display: none; }
        #toggle-button:checked + label.button-label{
            background-color: #51ccee;
        }
        
        
        .message{
        		width: 90%;
				height: 2.66rem;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 1rem;
				background: white;
				/*border: 1px solid darkgray;*/
				/*overflow: hidden;*/
        }
        .mess-left{
        		width: 60%;
				height: 2.66rem;
				border-radius: 10px;
				text-align: left;
				/*margin-top: 1rem;*/
				background: white;
				border: 1px solid darkgray;
				overflow: hidden;
				float: left;
        }
        
        .mess-left input{
        	width: 100%;
        	height:2.66rem;
        	border: 0;
        	font-size: 1rem;
        }
        
         .mess-right{
        		width: 38%;
				height: 2.66rem;
				border-radius: 10px;
				background: lightgray;
				border: 1px solid darkgray;
				overflow: hidden;
				float: right;
        }
        
        .mess-right p{
        	text-align: center;
        	line-height: 2.66rem;
        	color: gray;
        }
		</style>
	</head>

	<body>
		<div class="app">

			<div class="top">
				<p>返回</p>
				<p>会员注册</p>
				<p>···</p>
			</div>

			<div class="content">
				<div class="binding">
					<p>＜</p>
					<p>注册</p>
					<p></p>
				</div>

				<div class="con-bon">
					
					<div class="con-shang">
						<input type="text" id="code_input" value="" placeholder="请输入验证码"/>
						

						<div class="shang-one">
							
							<div id="v_container" style="width: 65px;height: 30px;border: 1px solid gray;"></div>
							
						</div>

					</div>
					
					
					<div class="message">
						
						<div class="mess-left">
						<input type="text" placeholder="请输入手机号"/>
						</div>
						<div class="mess-right">
							
							<p>获取短信验证码</p>
						</div>
					</div>
					
					<div class="con-top">
						<input type="text" placeholder="请输入短信验证码" />

					</div>

					<div class="con-xia">
						<input type="text" placeholder="密码" />

						<div class="div">
							
							<div class="toggle-button-wrapper">
						    <input type="checkbox" id="toggle-button" name="switch">
						    <label for="toggle-button" class="button-label">
						        <span class="circle"></span>
						        <span class="text on"></span>
						        <span class="text off"></span>
						    </label>
							</div>
							
						</div>

					</div>

					<div class="anniu">
						<p id="my_button">注册</p>
					</div>

			



				</div>

			</div>

		</div>
	</body>
	<script src="js/gVerify.js"></script>
	<script>
		var verifyCode = new GVerify("v_container");

		document.getElementById("my_button").onclick = function(){
			var res = verifyCode.validate(document.getElementById("code_input").value);
			if(res){
				alert("验证正确");
			}else{
				alert("验证码错误");
			}
		}
	</script>

</html>